<template>
    <div class='right'>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 带边框表格 -->
        <template>
        <el-table
            :data="rightList"
            border
            style="width: 100%">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            prop="authName"
            label="权限"
            width="180">
            </el-table-column>
            <el-table-column
            prop="path"
            label="路径"
            width="180">
            </el-table-column>
            <el-table-column label="层级" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.level | levelFormat}}</span>
          </template>
        </el-table-column>
        </el-table>
        </template>
    </div>
</template>
<script>
import {getRightList} from '@/api/index.js'
export default {
  data () {
    return {
      rightList: []
    }
  },
  // 在el-table中：过滤器只能在插值表达式中使用
  filters: {
    levelFormat (level) {
      if (level === '0') {
        return '一级'
      } else if (level === '1') {
        return '二级'
      } else if (level === '2') {
        return '三级'
      }
    }
  },
  mounted () {
    //   list 列表显示权限
    getRightList({type: 'list'})
      .then((res) => {
        // console.log(res)
        if (res.meta.status === 200) {
          this.rightList = res.data
        }
      })
  }
}
</script>
<style lang="scss" scoped>
</style>
